<template>
	<ln-modal width="680px" :title="title" :mask-closable="false" :on-after-enter="onModalShow">
		<n-form
			ref="formRef"
			:model="form"
			:rules="rules"
			:disabled="props.modalType === ModalTypeEnum.detail"
			label-placement="left"
			require-mark-placement="right-hanging"
			label-width="100px"
		>
			<n-grid :cols="24" :x-gap="24">
				<n-form-item-gi :span="11" label="字典名称" path="dictTypeName">
					<n-input v-model:value="form.dictTypeName" placeholder="请输入" />
				</n-form-item-gi>
				<n-form-item-gi :span="11" label="字典编号" path="dictTypeCode">
					<n-input v-model:value="form.dictTypeCode" placeholder="请输入" />
				</n-form-item-gi>
				<n-form-item-gi :span="11" label="数据类型" path="detailValueType">
					<n-select v-model:value="form.detailValueType" :options="valueTypeOption" />
				</n-form-item-gi>
				<n-form-item-gi :span="22" label="描述" path="remark">
					<n-input v-model:value="form.remark" type="textarea" placeholder="请输入" />
				</n-form-item-gi>
			</n-grid>
		</n-form>
		<template #footer>
			<div style="margin-top: 20px">
				<n-button
					v-if="props.modalType === ModalTypeEnum.detail"
					type="primary"
					@click="handleUpdateClick"
					>编辑</n-button
				>
				<n-button v-else type="primary" @click="handleSaveClick">保存</n-button>
				<n-button @click="handleCloseClick(false)">取消</n-button>
			</div>
		</template>
	</ln-modal>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import type { PropType } from 'vue';
import { addDic, updateDic } from '@/api/system/dictionary';
import type { DicListRow } from '@/api/system/dictionary';
import { useMessage } from 'naive-ui';
import type { FormInst } from 'naive-ui';
import { ModalTypeEnum, type ModalTypeParam } from '@/utils/enum';
import { titleFormatter } from '@/utils/formatter';

const { t } = useI18n();
const props = defineProps({
	modalData: {
		type: Object,
		default: () => {},
	},
	modalType: {
		type: [String, Number] as PropType<ModalTypeParam>,
		default: ModalTypeEnum.add,
	},
});
const valueTypeOption = ref([
	{ value: 0, label: 'String' },
	{ value: 1, label: 'Number' },
]);
const emit = defineEmits(['close', 'update']);
const title = computed(() => titleFormatter(props.modalType));
// form
const formRef = ref<FormInst | null>();
const rules = {
	dictTypeName: { required: true, trigger: ['blur'], message: t('msg.input') },
	dictTypeCode: { required: true, trigger: ['blur'], message: t('msg.input') },
};
const baseForm: DicListRow = {
	dictTypeName: '',
	dictTypeCode: '',
	detailValueType: 0,
	remark: '',
};
const form = ref<DicListRow | DicListRow>({ ...baseForm });
const message = useMessage();

// 初始化
function onModalShow() {
	if (props.modalType === ModalTypeEnum.add) {
		form.value = { ...baseForm };
	} else {
		const params = JSON.parse(JSON.stringify(props.modalData));
		params.authIdArr = params.authIds?.split(',').map(item => Number(item)) || [];
		form.value = params;
	}
}

// 保存
function handleSaveClick() {
	formRef.value?.validate(async errors => {
		if (!errors) {
			const params = { ...unref(form) };
			if (props.modalType === ModalTypeEnum.add) {
				await addDic(params);
			} else {
				await updateDic(params as DicListRow);
			}
			message.success(t('msg.operationCompleted'));
			handleCloseClick(true);
		}
	});
}
// 关闭
function handleCloseClick(data?: boolean) {
	emit('close', data);
}
// 编辑
function handleUpdateClick() {
	emit('update');
}
</script>

<style lang="scss" scoped>
.check-item {
	width: 120px;
}
</style>
